<template>
	<view>
		<view class="order-body">
			<view class="layout-left">
				<view class="order-body-tooltip">订单已完成</view>
				<view class="order-body-icon">
					<image src="../../../static/icon-close.png"></image>
				</view>				
			</view>
		</view>
		<view class="order-block">
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-icon">
						<image src="../../../static/food.jpg"></image>
					</view>
					<view class="order-block-item-body">
						<view class="order-block-item-body-text">花鲢鱼1整条+配菜5样+其他真相其他真相其他真相其他真相</view>
						<view class="order-block-item-body-note">2500克，特辣</view>
						<view class="order-block-item-body-volume">x1</view>
					</view>
					<view class="order-block-item-volume">
						<view>￥158</view>
						<view>含5元津贴</view>
					</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">打包费</view>
					<view>￥0</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">用户配送费</view>
					<view>￥6</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">放心吃（商家赠送）</view>
					<view>￥0</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">商家代金卷优惠</view>
					<view>-￥5</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view>实付满60返卷</view>
					<view>满60减5商家卷</view>
				</view>
			</view>
			<view class="order-block-discount">
				已优惠<text>￥50</text> 合计<text class="order-block-discount-volume">￥159</text>
			</view>
		</view>
		<view class="order-block">
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">期望时间</view>
					<view>立即配送</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">配送地址</view>
					<view>
						<view>恒大同景国际G区14栋1单元5-1</view>
						<view>陈**(先生)138****5702</view>
					</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">配送服务</view>
					<view>美团跑腿</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">配送骑手</view>
					<view>美团</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">订单号码</view>
					<view>23424234324</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">下单时间</view>
					<view>2023-12-25 23：15：35</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">支付方式</view>
					<view>在线支付</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">支付时间</view>
					<view>2023-12-25 23：15：35</view>
				</view>
			</view>
			<view class="order-block-item">
				<view class="layout">
					<view class="order-block-item-tooltip">餐具数量</view>
					<view>商家按参量提供</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.order-body { width: 660rpx; padding: 20rpx; margin: 25rpx auto;  }
.order-body-tooltip { font-size: 26px; font-weight: 600; color: #333; }
.order-body-icon { width: 30rpx; height: 30rpx; padding-top: 20rpx; padding-left: 20rpx; }
.order-block { width: 660rpx; padding: 20rpx; background: #fff; margin: 25rpx auto; border-radius: 20rpx; }
.order-block-discount { text-align: right; font-size: 14px; padding: 25rpx 0;}
.order-block-discount-volume { font-size: 20px; color: #333!important;}
.order-block-discount text { color: #f30;}

.order-block-item { padding: 25rpx 0; }
.order-block-item-tooltip { font-size: 12px; color: #999; }

.order-block-item-icon { width: 100rpx; height: 100rpx;}
.order-block-item-icon image { border-radius: 10rpx;}

.order-block-item-body { width: 440rpx; padding-left: 20rpx;}
.order-block-item-body-text { width: 440rpx; font-size: 13px; padding-bottom: 10rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.order-block-item-body-note { color: #999;}
.order-block-item-body-volume { color: #999; }
.order-block-item-volume { width: 100rpx; text-align: right; }
</style>
